<template>
    <div>
    <el-container>
        <el-header :style="{ background: mainColor, color: textColor }">
            <el-row class="header-row">
                <el-col :span="12">
                    <h1 style="margin: 0; line-height: 60px;">文献收藏页</h1>
                </el-col>
                <el-col :span="6">
                    <el-form :inline="true">
                    <el-form-item label="搜索文献:" style="margin-bottom: 0;">
                        <el-input v-model="searchTerm" @input="searchworks" clearable />
                    </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
        <el-scrollbar height="100vh">
            <el-row>
            <el-col :span="24">
                <el-alert
                v-if="showWorks.length === 0"
                title="暂无收藏的文献"
                type="info"
                show-icon
                />
                <div v-for="work in showWorks" :key="work.id" class="work-item">
                    <el-row class="work-row">
                        <el-col :span="22" >
                            <h2 @click="toWork(work.id)">{{ work.title }}</h2>
                            <p class="info">
                            作者:
                            <span v-for="(authorship, index) in work.authorships" :key="index">
                                <span v-if="authorship.author && authorship.author.display_name">{{ authorship.author.display_name }}</span>
                                <span v-if="index < work.authorships.length - 1">, </span>
                            </span>
                            </p>
                            <p class="info">收藏日期: {{ work.star_time  }}</p>
                        </el-col>
                        <el-col :span="2" class="remove-col">
                            <el-button @click="removework(work.id)" type="danger" size="mini">取消收藏</el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            </el-row>
        </el-scrollbar>
        </el-main>
    </el-container>
    </div>
</template>
  
<script>
    import { req_getPaperStar, req_removePaperStar } from '/src/api'
    import { response2ElMessage } from '/src/utils/response-utils.js'
    export default {
        data() {
            return {
                works:[],
                showWorks:[],
                searchTerm: '',
                mainColor: '#ffffff',
                backColor: '#f5f7fa',
                textColor: '#303133',
            };
        },
        methods: {
            async removework(workId) {
                try {
                    let response = await req_removePaperStar(workId)
                    let data = response.data
                    if (data['errno'] === 1) {
                        // ElMessage.success("RemovePaperStar success!")
                        this.works = this.works.filter(work => work.id !== workId);
                        this.showWorks = this.works;
                    }
                } catch (error) {
                    ElMessage.error("RemovePaperStar error!");
                }
                // this.works = this.works.filter(doc => doc.id !== workId); // test
            },
            async getPaperStarList() {
                try {
                    let response = await req_getPaperStar()
                    let data = response.data
                    if (data['errno'] === 1) {
                        
                    this.works = data["result"]
                    this.showWorks = this.works;
                    // console.log(this.works);
                        
                    }
                } catch (error) {
                    // ElMessage.error("getPaperList error!")
                }
            },
            toWork(work_id) {
                const paper_id = work_id;
                const route = this.$router.resolve({
                    name: 'paper', params: { paper_id }
                });
                window.open(route.href, '_blank');
            },
            searchworks() {
                const sTerm = this.searchTerm.toLowerCase()
                // console.log(JSON.stringify(this.works))
                if(sTerm.length == 0) {
                    this.showWorks = this.works;
                }else{
                    this.showWorks = this.works.filter(
                    work =>
                        work.title.toLowerCase().includes(sTerm) ||
                        work.authorships?.some(authorship => authorship.author?.display_name?.toLowerCase().includes(sTerm))

                    );
                }
            },
        },
        created() {
            // this.works = this.$store.state.works;
            this.getPaperStarList()
        },
    };
</script>
  
<style scoped>
    body {
        --el-color-primary: var(--main-color);
        --el-background-color-primary: var(--back-color);
        --el-text-color-primary: var(--text-color);
        overflow-y: hidden; 
    }
    .el-container {
        height: calc(100vh - 60px);
    }
    
    .header-row {
        display: flex;
        justify-content: space-between; 
        align-items: center;
    }

    .work-row {
        display: flex;
        align-items: center;
    }

    .remove-col {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .search-col {
        margin-right: 10px;
    }
    
    .work-item {
        cursor: pointer;
        background-color: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        padding: 15px;
        margin: 15px 0;
        position: relative;
        overflow: hidden;
        transition: box-shadow 0.3s ease-in-out;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    
        &:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }
    }
    
    .info {
        color: #909399;
    }
</style>
    